<template>
  <el-dialog title="新增领料单" v-model="dialogVisible" width="80%" style="margin-top: 40px;" >
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      row-key="partId"
      @selection-change="handleSelectionChange"
      :height="contentHeight * 0.8"
    >
      <el-table-column type="selection" :reserve-selection="true" fixed="left" />
      <el-table-column label="材料类别" header-align="left" align="left" prop="materialCategory" />
      <el-table-column label="物料编号" header-align="left" align="left" prop="materialNumber" />
      <el-table-column label="物料名称" header-align="left" align="left" prop="materialName" />
      <el-table-column label="材质" header-align="left" align="left" prop="material" />
      <el-table-column label="规格" header-align="left" align="left" prop="specification" />
      <el-table-column label="单位" header-align="left" align="left" prop="dictUnit" />
      <el-table-column label="下料尺寸（总）" header-align="left" align="left" prop="baitingTotalSize" />
      <el-table-column label="工艺尺寸（总）" header-align="left" align="left" prop="processTotalSize" />
      <el-table-column label="下料尺寸总重(kg)" header-align="left" align="left" prop="baitingTotalWeight" />
      <el-table-column label="工艺尺寸总重(kg)" header-align="left" align="left" prop="processTotalWeight" />
      <el-table-column label="需求数量" header-align="left" align="left" prop="requireQuantity" />
      <el-table-column label="已领数量" header-align="left" align="left" prop="haveQuantity" />
    </el-table>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as GetMaterialsFormApi from '@/api/produce/workOrderManagement/getMaterialsForm'

defineProps({
  contentHeight: {
    type: Number,
    default: 0
  }
})

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
// const queryParams = reactive({
//   productNumber: undefined,
// })
const list = ref([])
const formRef = ref() // 表单 Ref
const multipleTableRef = ref()

/** 打开弹窗 */
const open = async (productNumber: string, row?: any) => {
  dialogVisible.value = true
  resetForm()
  await getList(productNumber)
  if (row) {
    row.map(item => {
      list.value.map(column => {
        if (item.partId === column['partId']) {
          nextTick(() => {
            // 回显
            multipleTableRef.value!.toggleRowSelection(column, true)
          })
        }
      })
    })
  }
}

const emit = defineEmits(['getMaterialsOrder'])

// 确认
const submitForm = () => {
  if (!multipleSelection.value.length) {
    message.notifyError('请至少选择一条数据')
    return
  }
  dialogVisible.value = false
  emit('getMaterialsOrder', multipleSelection.value)
  multipleTableRef.value!.clearSelection()
}

// 获取列表
const getList = async (productNumber: string) => {
  formLoading.value = true
  try {
    list.value = await GetMaterialsFormApi.getMaterialInfo({ productNumber: productNumber })
  } finally {
    formLoading.value = false
  }
}

// 多选赋值
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 20px;
}
</style>
